import React, { Component, Fragment } from 'react';
import { Card } from 'antd';
import {
  Row, Col,
} from 'antd';
import LeftForm from './components/LeftForm';
import Result from './components/Result';
import zhejiufei from './assets/zhejiufei';
import styles from './index.less';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 0,
    };
  }

  render() {
    const that = this;
    const {
      result,
    } = this.state;

    const leftFormProps = {
      handleSubmit({ typeSelector, year, price }) {
        // console.log(values);
        // {typeSelector: "拖拉机", year: 2, price: 2222}
        const { a: calA, b: calB } = zhejiufei[typeSelector];
        that.setState({ result: calA * price * Math.pow(calB, year) });
      },
    };

    const resultProps = {
      result,
    };

    return (
      <Fragment>
        <Card bordered={false}>
          <Row>
            <Col xs={14}>
              <LeftForm {...leftFormProps} />
            </Col>
            <Col xs={8} offset={2} style={{ height: '100%' }}>
              <Result {...resultProps} />
            </Col>
          </Row>
        </Card>
      </Fragment>
    );
  }
}

export default Index;
